<?php
/**
 * @author wyl
* @date 2015-8-25 15:56:37
*/
Yii::import('system.web.widgets.CWidget');
class CAuctionDetailImages extends CWidget{
	public $id;
	public $images=array();
	
	public function init(){
		if(empty($this->id)){
			$this->id='auction-image-'.time();
		}	
	}
	
	public function run(){
		echo CHtml::openTag('div',array(
									'id'	=>$this->id,
									'class'	=>'auction-image'	
							));
		echo $this->renderImage();
		echo $this->renderThumbnails();
		echo CHtml::closeTag('div');
		$this->addScript();
	}
	
	public function renderImage(){
		if(count($this->images)){
			echo CHtml::openTag('div',array('class'=>'auction-image-carousel'));
			echo CHtml::image('');
			echo CHtml::closeTag('div');
		}
	}
	
	public function renderThumbnails(){
		echo CHtml::openTag('ul',array('class'=>'auction-image-thumbs'));
		foreach($this->images as $img){
			echo CHtml::openTag('li');
			echo CHtml::image($img['src']);
			echo CHtml::closeTag('li');
		}	
		echo CHtml::closeTag('ul');
	}
	
	public function addScript(){
		Yii::app()->clientScript->registerScript('auction-image-css',"
			$(document).ready(function(){
				var initImage=$('.auction-image-thumbs li').eq(0).find('img').attr('src');
				$('.auction-image-carousel img').attr('src',initImage);
				$('.auction-image-thumbs li').on('click',function(){
					$('.auction-image-carousel img').attr('src',$(this).find('img').attr('src'));
				}); 
				$('.auction-image-thumbs li').on('mousemove',function(){
					$('.auction-image-carousel img').attr('src',$(this).find('img').attr('src'));
				});
			})
		");
		Yii::app()->clientScript->registerCss('auction-image-js', "
			.auction-image{
				width:100%;
				height:auto;	
			}		
			.auction-image-carousel{
				width:100%;
				height:390px;
				margin:5px;
				border:solid 1px #ccc;
				padding:2px;
				text-align:center;
				padding:10px;
			}
			.auction-image-carousel img{
				width:100%;
				height:100%;	
			}
			.auction-image-thumbs{
				width:100%;
				height:100px;
			}
			.auction-image-thumbs li{
				width:80px;
				height:60px;
				display:inline-block;
				margin:5px;
				border:solid 1px #ccc;
				padding:2px;
			}	
			.auction-image-thumbs li img{
				width:100%;
				height:100%;
			}
		");
	}
	
}		
